<template>
<el-container class="maincon">
  <el-header class="header">
    <div>
      <img src="../assets/logo.png" alt=""/>
      <span>后台管理系统</span>
    </div>
    <el-button type="info" @click="logout">退出</el-button>
  </el-header>
  <el-container>
    <el-aside class="aside" :width="sidewidth">
        <el-button style="background-color: #3d5254; font-size: 20px; font-weight: bolder; color: #f5ffe4" @click="open">{{opcl}}</el-button>
      <el-menu style="" background-color="#3d5254" router :collapse-transition="false" text-color="#cccccc" active-text-color="#409eff" class="menu" :collapse="isCollapse">
          <el-menu-item  index="/users">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="/control">
            <i class="el-icon-s-tools"></i>
            <span slot="title">权限管理</span>
          </el-menu-item>
          <el-menu-item index="/shop">
            <i class="el-icon-sell"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>
          <el-menu-item index="/order">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <el-menu-item index="/data">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">数据统计</span>
          </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
<!--      路由占位符-->
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
  name: "Home",
  data(){
    return{
      // isOpenAnimation: false,
      opcl: '>',
      sidewidth: "200px",
      isCollapse: false
    }
  },
  methods:{
    logout(){
      this.$router.replace({path: "/login"})
    },
    open(){
      if(this.isCollapse){
        this.sidewidth = "200px"
        this.isCollapse = false
        this.opcl = "<"
      }
      else {
        this.sidewidth = "65px"
        this.isCollapse = true
        this.opcl = ">"
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header{
  background-color: #2c3e50;
  color: #f5ffe4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img{
    height: 40%;
    width: 20%;
  }
  font-size: 20px;
  >div{
    display: flex;
    align-items: center;
    span{
      margin-left: 15px;
    }
  }
}

.aside{
  background-color: #3d5254;
  height: 100%;
  //width: 100%;
  color: #eeeeee;
}
.maincon{
  height: 100%;
}
</style>
